<template>
  <div class="bor1">
    <div class="">
      <el-tabs v-model="tabName" type="card" @tab-click="tabClick">
        <el-tab-pane
          v-for="(item,index) in tabPaneList"
          :key="index"
          :label="item.label"
          :name="item.name"
        >
        </el-tab-pane>
      </el-tabs>
      <el-table v-loading="loading" :data="tableData">
        <el-table-column
          v-for="(item1,index1) in tableColum"
          :key="index1"
          :prop="item1.prop"
          :label="item1.label"
          :min-width="item1.minWidth"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Change',
  props: {
    objectInstanceId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      baloading: false,
      tabName: '01',
      tabPaneList: [
        {
          label: '当前变更',
          name: '01'
        },
        {
          label: '历史变更',
          name: '02'
        }
      ],
      tableData1: [
        { code: '1001',
          type: '物料',
          rev: '1',
          description: '物料相对的描述',
          status: '已发布',
          createDate: '2020-8-1 19:7:10' },
        { code: '1002',
          type: '文档',
          rev: '2',
          description: '文档相对的描述',
          status: '草稿',
          createDate: '2020-7-25 16:5:10' },
        { code: '1001',
          type: '物料',
          rev: '1',
          description: '物料相对的描述',
          status: '已发布',
          createDate: '2020-8-1 19:7:10' },
        { code: '1002',
          type: '文档',
          rev: '2',
          description: '文档相对的描述',
          status: '草稿',
          createDate: '2020-7-25 16:5:10' }
      ],
      tableData2: [
        { code: '3001',
          type: '物料',
          rev: '1',
          description: '物料相对的描述',
          status: '已发布',
          createDate: '2020-8-1 19:7:10' },
        { code: '3002',
          type: '文档',
          rev: '2',
          description: '文档相对的描述',
          status: '草稿',
          createDate: '2020-7-25 16:5:10' },
        { code: '3003',
          type: '物料',
          rev: '1',
          description: '物料相对的描述',
          status: '已发布',
          createDate: '2020-8-1 19:7:10' },
        { code: '3004',
          type: '文档',
          rev: '2',
          description: '文档相对的描述',
          status: '草稿',
          createDate: '2020-7-25 16:5:10' }
      ],
      tableData: [
        { code: '1001',
          type: '物料',
          rev: '1',
          description: '物料相对的描述',
          status: '已发布',
          createDate: '2020-8-1 19:7:10' },
        { code: '1002',
          type: '文档',
          rev: '2',
          description: '文档相对的描述',
          status: '草稿',
          createDate: '2020-7-25 16:5:10' },
        { code: '1001',
          type: '物料',
          rev: '1',
          description: '物料相对的描述',
          status: '已发布',
          createDate: '2020-8-1 19:7:10' },
        { code: '1002',
          type: '文档',
          rev: '2',
          description: '文档相对的描述',
          status: '草稿',
          createDate: '2020-7-25 16:5:10' }
      ],
      tableColum: [
        {
          prop: 'code',
          label: '编码',
          minWidth: '40'
        },
        {
          prop: 'type',
          label: '类型',
          minWidth: '50'
        },
        {
          prop: 'rev',
          label: '版本',
          minWidth: '50'
        },
        {
          prop: 'description',
          label: '描述',
          minWidth: '100'
        },
        {
          prop: 'status',
          label: '状态',
          minWidth: '50'
        },
        {
          prop: 'createDate',
          label: '创建日期',
          minWidth: '100'
        }
      ]
    }
  },
  methods: {
    tabClick(val) {
      switch (val.name) {
        case '01':
          this.tableData = this.tableData1
          break
        case '02':
          this.tableData = this.tableData2
          break
      }
    }
  }
}

</script>

<style lang="scss" scoped>
::v-deep .el-tabs__item {
  line-height: 2.5 !important;
  height: 35px !important;
}
::v-deep.el-tabs--card > .el-tabs__header{
    margin-bottom: 0px!important;
}
::v-deep.el-tabs--border-card > .el-tabs__content{
    padding: 0px !important;
}
.bor1{
  border: 1px solid #eff2f7;
}
::v-deep.el-tabs--card > .el-tabs__header .el-tabs__item.is-active{
  background-color: #F8F9fa;
  border-bottom: 1px solid #F8F9fa;
}
</style>
